<template>
    <div style="height: 45px;width: 100%;display: flex;justify-content: center;align-items: center">
        <button style="width: 10%;height: 100%;border-radius: 50px;background: #409eff;border: #409eff"
                @click="addFormVisible = true">
            <el-icon color="#fff" size="25">
                <Plus/>
            </el-icon>
        </button>
    </div>
    <!--表格  -->
    <el-table :data="tableData.tableList" style="width: 100%" size="default" current-row-key="number">
        <el-table-column label="店铺名" prop="name"/>
        <el-table-column label="店铺地址" prop="adder"/>
        <el-table-column label="店铺面积(平方米)" prop="area"/>
        <el-table-column label="店铺种类" prop="type"/>
        <el-table-column label="月租金（元）" prop="rent"/>
        <el-table-column label="营业额（元）" prop="turnover"/>
        <el-table-column align="right">
            <template #header>
                <div>
                    <el-input v-model="search" size="default" placeholder="回车搜索" @keydown.enter="tableList"/>
                </div>
            </template>
            <template #default="scope">
                <el-button size="default" @click="handleEdit(scope.$index, scope.row)"
                >
                    <el-icon>
                        <Edit/>
                    </el-icon>
                </el-button
                >
                <el-button
                        size="default"
                        type="primary"
                        @click="handleDelete(scope.$index, scope.row)"
                >
                    <el-icon>
                        <Delete/>
                    </el-icon>
                </el-button
                >
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" v-model:current-page="tableData.page"
                       :total="tableData.total" :hide-on-single-page="true"/>
    </div>
    <!--修改弹窗-->
    <el-dialog v-model="dialogFormVisible" title="修改信息"
               center align-center destroy-on-close>
        <el-form :model="tableData.update">
            <el-form-item label="店铺名" :label-width="formLabelWidth">
                <el-input v-model="tableData.update.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="店铺地址" :label-width="formLabelWidth">
                <el-input v-model="tableData.update.adder" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="店铺面积" :label-width="formLabelWidth">
                <el-input-number v-model="tableData.update.area" :precision="2" :step="0.1" :max="10"/>
            </el-form-item>
            <el-form-item label="店铺种类" :label-width="formLabelWidth">
                <el-input v-model="tableData.update.type" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="月租金" :label-width="formLabelWidth">
                <el-input-number v-model="tableData.update.rent" :step="100" :min="0" :max="100000"/>
            </el-form-item>
            <el-form-item label="营业额" :label-width="formLabelWidth">
                <el-input-number v-model="tableData.update.turnover" :step="100" :min="0" :max="100000"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="update(tableData.update)">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>
    <!--添加弹窗-->
    <el-dialog v-model="addFormVisible" title="添加信息"
               center align-center destroy-on-close>
        <el-form :model="ShopEntity">
            <el-form-item label="店铺名" :label-width="formLabelWidth">
                <el-input v-model="ShopEntity.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="店铺地址" :label-width="formLabelWidth">
                <el-input v-model="ShopEntity.adder" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="店铺面积" :label-width="formLabelWidth">
                <el-input-number v-model="ShopEntity.area" :precision="2" :step="0.1" :max="10"/>
            </el-form-item>
            <el-form-item label="店铺种类" :label-width="formLabelWidth">
                <el-input v-model="ShopEntity.type" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="月租金" :label-width="formLabelWidth">
                <el-input-number v-model="ShopEntity.rent" :step="100" :min="0" :max="100000"/>
            </el-form-item>
            <el-form-item label="营业额" :label-width="formLabelWidth">
                <el-input-number v-model="ShopEntity.turnover" :step="100" :min="0" :max="100000"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save(ShopEntity)">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
    import {ElLoading, ElDrawer, ElMessage} from 'element-plus'
    import {onMounted, reactive, ref, watch} from 'vue'
    import http from "@/service/http.js";
    import {
        Delete, Edit, Plus
    } from '@element-plus/icons-vue'

    <#list table.fields as field>
    <#if field.keyFlag>
    <#assign keyPropertyName="${field.propertyName}"/>
    </#if>

    <#if field.comment!?length gt 0>
    <#if swagger2>
    @ApiModelProperty(value = "${field.comment}")
    <#else>
    /**
     * ${field.comment}
     */
    </#if>
    </#if>
    <#if field.keyFlag>
    <#-- 主键 -->
    <#if field.keyIdentityFlag>
    @TableId(value = "${field.name}", type = IdType.AUTO)
    <#elseif idType??>
    @TableId(value = "${field.name}", type = IdType.${idType})
    <#elseif field.convert>
    @TableId("${field.name}")
    </#if>
    <#-- 普通字段 -->
    <#elseif field.fill??>
    <#-- -----   存在字段填充设置   ----->
    <#if field.convert>
    @TableField(value = "${field.name}", fill = FieldFill.${field.fill})
    <#else>
    @TableField(fill = FieldFill.${field.fill})
    </#if>
    <#elseif field.convert>
    @TableField("${field.name}")
    </#if>
    <#-- 乐观锁注解 -->
    <#if (versionFieldName!"") == field.name>
    @Version
    </#if>
    <#-- 逻辑删除注解 -->
    <#if (logicDeleteFieldName!"") == field.name>
    @TableLogic
    </#if>
    private ${field.propertyType} ${field.propertyName};
    </#list>
    interface TableList {
        id: number
        name: string
        adder: String
        area: String
        type: String
        rent: number
        turnover: number
    }

    const ${entity}Entity = reactive({
        name: "",
        adder: "",
        area: 0,
        type: "",
        rent: 0,
        turnover: 0,
    })

    const search = ref('')
    const table = ref(false)
    const tableData = reactive({
        tableList: [],
        total: 0,
        page: 1,
        update: {},
    })

    onMounted(() => {
        tableList();
    })
    watch(() => tableData.page, (page) => {
        tableList();
    })

    /**
     * 打开修改弹窗
     * @param index
     * @param row
     */
    const handleEdit = (index: number, row: TableList) => {
        dialogFormVisible.value = true
        console.log("aa", row)
        tableData.update = row;
    }
    /**
     * 删除
     * @param index
     * @param row
     */
    const handleDelete = (index: number, row: TableList) => {
        http.delete("/Shop/" + row.id).then(res => {
            if (res.data.code === 200) {
                ElMessage.success("删除成功")
            } else {
                ElMessage.error(res.data.msg)
            }
            tableList();
        })
    }
    /**
     * 查询
     */
    const tableList = () => {
        const loadingInstance = ElLoading.service()
        setTimeout(loadingInstance.close, 300)
        const page = {
            currentPage: tableData.page,
            pageSize: 9,
            name: search.value
        }
        http.get("/Shop/page", {
            params: page
        }).then(res => {
            console.log("eee==", res)
            tableData.tableList = res.data.data.list;
            tableData.total = res.data.data.total;
        }).catch(err => {
            console.log(err)
        })
    }
    /**
     * 更新
     */
    const update = (data) => {
        http.put("Shop/update", data)
            .then(res => {
                if (res.data.code === 200) {
                    ElMessage.success("修改成功");
                    tableList();
                } else {
                    ElMessage.error(res.data.msg);
                }
                dialogFormVisible.value = false;
            }).catch(err => {
            ElMessage.error("网络异常");
        })
    }
    /**
     * 添加
     * @param data
     */
    const save = (data) => {
        http.post("/Shop/add", data)
            .then(res => {
                if (res.data.code === 200) {
                    ElMessage.success("修改成功");
                    tableList();
                } else {
                    ElMessage.error(res.data.msg);
                }
                addFormVisible.value = false;
            }).catch(err => {
            ElMessage.error("网络异常");
        })
    }

    const drawerRef = ref<InstanceType<typeof ElDrawer>>()
    const dialogFormVisible = ref(false)
    const addFormVisible = ref(false)
    const formLabelWidth = '90px'

</script>
<style scoped>
    .example-pagination-block + .example-pagination-block {
        margin-top: 10px;
    }

    .example-pagination-block {
        position: absolute;
        bottom: 30px;
        width: 85%;
        display: flex;
        justify-content: center;
    }
</style>
